<template>
  <div>
      <h3>学习vue的生命周期</h3>
      <p>{{msg}}</p>
      <ul id="myUl"> 
          <li  v-for="(obj,index) in arr" :key="index"> {{obj}}</li>
      </ul>
      <button @click="()=>{arr.push(100)}">点击末尾添加值</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            msg: "欢迎学习vue生命周期",
            arr:[8,5,2,1]
        }
    },
    // 实例化以后，时间和生命周期函数挂载到实例上以后，data初始化之前
    beforeCreate(){
        console.log("beforeCreate");
        console.log(this.msg) //undefind
    },
    // data和methods里的值挂在到了实例对象上以后j
    created(){
        console.log("created");
        console.log(this.msg)
    },
    // 真实Dom挂在之前
    beforeMount(){
        console.log("beforeMount");
        console.log(document.querySelectorAll("#myUl>li")[0]);
        // 作用：在挂在之前，可以操作数据- 不触发updated生命周期函数
        this.msg = "我爱学习"
    },
    mounted(){
        // console.log("mounted");
        console.log(document.querySelectorAll("#myUl>li")[0])
    },
    beforeUpdate(){ //更新之前
        console.log("beforeUpdate");
        console.log(document.querySelectorAll("#myUl>li")[4])
    },
    updated(){ //更新之后
        console.log("updated");
        console.log(document.querySelectorAll("#myUl>li")[4])
    },
    beforeDestroy(){
        // 销毁之前
        console.log("beforeDestroy")
        
        console.log(this.msg) //我爱学习

        this.msg = null;
    },
    destroyed(){
        console.log("destroy")
        console.log(this.msg)
    }
}
</script>

<style>

</style>